---
type: tutorial
title: Crea y pasa datos a una plantilla de blog personalizada
i18nReady: true
description: >-
  Tutorial: Crea tu primer blog con Astro —
  Crea una plantilla de entrada de blog para tus archivos Markdown y pásale los valores frontmatter
  como props
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ahora que ya tienes una plantilla para tus páginas, ¡es hora de añadir una plantilla para las entradas del blog!

<PreCheck>
  - Crear una nueva plantilla de entrada de blog para tus archivos Markdown
  - Pasar valores frontmatter YAML como props al componente plantilla
</PreCheck>

## Añade una plantilla a las entradas de tu blog

Al incluir la propiedad frontmatter `layout` en un archivo `.md`, todos los valores YAML de frontmatter estarán disponibles para el archivo plantilla.

<Steps>
1. Crea un nuevo archivo en `src/layouts/MarkdownPostLayout.astro`.

2. Copia el siguiente código en `MarkdownPostLayout.astro`.

    ```astro title="src/layouts/MarkdownPostLayout.astro"
    ---
    const { frontmatter } = Astro.props;
    ---
    <h1>{frontmatter.title}</h1>
    <p>Escrito por {frontmatter.author}</p>
    <slot />
    ```

3. Añade la siguiente propiedad frontmatter en `post-1.md`.

    ```markdown title="src/pages/posts/post-1.md" ins={2}
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'Mi primera publicación en el blog'
    pubDate: 2022-07-01
    description: 'Este es la primera publicación de mi nuevo blog de Astro.'
    author: 'Alumno de Astro'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png' 
        alt: 'El logotipo completo de Astro.'
    tags: ["astro", "bloguear", "aprender en público"]
    ---
    ```

4. Comprueba de nuevo la vista previa de tu navegador en `http://localhost:4321/posts/post-1` y observa lo que la plantilla ha añadido a tu página. 

5. Añade la misma propiedad plantilla a tus otras dos publicaciones `post-2.md` y `post-3.md`. Comprueba en tu navegador que el plantilla también se aplica a estas publicaciones.
</Steps>

:::tip
Al utilizar plantillas, ahora tienes la opción de incluir elementos, como un título de página, en el contenido Markdown o en la plantilla. Recuerda inspeccionar visualmente la vista previa de tu página y realizar los ajustes necesarios para evitar elementos duplicados. 
:::

<Box icon="puzzle-piece">

## Pruébalo tú mismo - Personaliza la plantilla de las publicaciones de tu blog

**Reto**: Identifica los elementos comunes a cada publicación del blog, y utiliza `MarkdownPostLayout.astro` para renderizarlos, en lugar de escribirlos en tu Markdown en `post-1.md` y en cada futura publicación del blog.

He aquí un ejemplo de refactorización de tu código para incluir la `pubDate` en el componente plantilla en lugar de escribirla en el cuerpo de tu Markdown:

```markdown title="src/pages/posts/post-1.md" del={1}
Published on: 2022-07-01

¡Bienvenido a mi nuevo blog sobre el aprendizaje de Astro! Aquí, voy a compartir mi viaje de aprendizaje a medida que construyo un nuevo sitio web.
```

```astro title="src/layouts/MarkdownPostLayout.astro" ins={5}
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Publicado el: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Escrito por {frontmatter.author}</p>
<slot />
```

Refactoriza todo lo que consideres útil y añade a tu plantilla todo lo que quieras, ¡recordando que todo lo que añadas a tu plantilla es una cosa menos que escribirás en todas y cada una de las publicaciones de tu blog!

Este es un ejemplo de un plantilla refactorizada que deja sólo el contenido individual de la publicación del blog renderizado por el slot. Siéntete libre de usarlo o de crear el tuyo propio.

```astro title="src/layouts/MarkdownPostLayout.astro"
---
const { frontmatter } = Astro.props;
---
<h1> {frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Escrito por: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
```
</Box>

:::note[Evitar duplicados]
 Todo lo que se muestre en la plantilla **no** tiene que escribirse en la publicación del blog. Si observas alguna duplicación al comprobar la vista previa de tu navegador, asegúrate de eliminar el contenido de tu archivo Markdown.
 :::

 

<Box icon="question-mark">

### Pon a prueba tus conocimientos
¿Puedes averiguar qué debe ir en los espacios en blanco para que los dos componentes siguientes produzcan juntos un código de Astro que funcione?

1.  ```markdown title="src/pages/posts/learning-astro.md"
    ---
    layout: ../../__________/MyMarkdownLayout.astro
    title: "Aprendiendo sobre Markdown en Astro"
    author: 'Alumno de Astro'
    ____: 2022-08-08
    ---
    ¡He aprendido mucho hoy! Astro me permite escribir en Markdown, pero también utilizar variables del frontmatter. Incluso puedo acceder a esos valores en un componente layout de Astro.
    ```

2.  ```astro title="src/layouts/MarkdownLayout.astro"
    ---
    import ____________ from '../components/Footer.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.title}</h1>
    <p>Escrito por:{frontmatter.______ } en {frontmatter.pubDate}</p>
    < _______ />
    <Footer />
    ```
    <details>
        <summary>¡Muestra los espacios en blanco rellenados!</summary>

        1.  ```markdown title="src/pages/posts/learning-astro.md" "../layouts" "pubDate:"
            ---
            layout: ../../layouts/MyMarkdownLayout.astro
            title: "Aprendiendo sobre Markdown en Astro"
            author: 'Alumno de Astro'
            pubDate: 2022-08-08
            ---
            ¡He aprendido mucho hoy! Astro me permite escribir en Markdown, pero también utilizar variables del frontmatter. Incluso puedo acceder a esos valores en un componente de plantilla de Astro.
            ```

        2.  ```astro title="src/layouts/MarkdownLayout.astro" " Footer " " frontmatter " ".author" "slot"
            ---
            import Footer from '../components/Footer.astro'
            const { frontmatter } = Astro.props
            ---
            <h1>{frontmatter.title}</h1>
            <p>Escrito por:{frontmatter.author } en {frontmatter.pubDate}</p>
            <slot />
            <Footer />
            ```
    </details>
</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Puedo añadir una propiedad plantilla a una publicación de blog Markdown en su frontmatter YAML.
- [ ] Puedo crear una plantilla separada para las publicaciones en Markdown.
- [ ] Puedo utilizar valores del frontmatter de una publicación en un componente plantilla.
</Checklist>

</Box>

### Recursos

- [Plantillas de Markdown en Astro](/es/guides/markdown-content/#layout-en-el-frontmatter)

- [Props de plantilla para Markdown](/es/basics/layouts/#props-de-plantillas-markdown)

- [Introduccion a YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) <Badge>externo</Badge>
